<template>
  <div class="main-explosionTubeAnalysis">

  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
let flag = true
let selectEntity = []
let result = []
// eslint-disable-next-line no-unused-vars
let from
// eslint-disable-next-line no-unused-vars
let dataTable = []

import layersMap from "@/components/js/layerMap";
import fetchData from "@/components/js/fetchData";

export default {
  name: "explosionTubeAnalysis",
  components: {},
  data() {
    return {};
  },
  props: ['index'],
  mounted() {

  },
  methods: {
    runCommand() {
      if (flag) {
        flag = false
        this.clearDraw()
        window.viewer.dadi.draw.startDraw({
          "type": "polyline",
          "style": {
            "lineType": "solid",      //线型
            "animationDuration": 1000,      //速度
            "animationImage": "img/textures/lineClr.png",      //图片
            "color": "#3388ff",      //颜色
            "width": 4,      //线宽
            "clampToGround": false,      //是否贴地
            "outline": false,      //是否衬色
            "outlineColor": "#ffffff",      //衬色颜色
            "outlineWidth": 2,      //衬色宽度
            "opacity": 1,      //透明度
            "zIndex": 0,      //层级顺序
          },
          success: (entity) => {
            this.updateSelect(entity);
          }
        });
      } else {
        flag = true
        this.clearDraw()
        let famenLayer = window.viewer.dataSources.getByName('famenLayer')[0]

        if (famenLayer.entities.values.length) {
          famenLayer.entities.removeAll()
          console.log('清空！！！')
          return;
        }

        // 清空闪烁点
        result.forEach(element => {
          element.destroy()
        });
        result = []
      }
    },
    clearDraw() {
      window.window.viewer.dadi.draw.clearDraw();
      for (let i = 0; i < selectEntity.length; i++) {
        selectEntity[i].billboard.image = 'img/marker/mark3.png';
      }
      selectEntity = [];
      from = null;
      // $table.bootstrapTable('destroy')
      $('#layerSelect').html('');
      // $('#thead').html('')
      dataTable = []
    },
    async updateSelect() {
      let layer = layersMap.find(l => l.type === '给水线')
      if (!layer) {
        haoutil.msg('请先添加给水线图层！')
        return
      }

      // 拿到绘制的geojson
      let drawGeojson = window.viewer.dadi.draw.toGeoJSON()
      from = turf.feature(drawGeojson.features[0].geometry)

      var famenLayer = window.viewer.dataSources.getByName('famenLayer')[0]
      if (!famenLayer) {
        famenLayer = new Cesium.CustomDataSource('famenLayer')
        window.viewer.dataSources.add(famenLayer)
      }

      if (famenLayer.entities.values.length) {
        famenLayer.entities.removeAll()
        console.log('清空！！！')
        return;
      }

      // 绘制带流向的graphic
      let lineData = await fetchData(layer.url)
      let pointData = await fetchData(layer.pointUrl)

      // 求交集
      let intersectsFeature = lineData.features.find(fea => {
        let to = turf.feature(fea.geometry)
        let withIntersect = turf.booleanIntersects(to, from);
        return withIntersect === true;
      })
      if (!intersectsFeature) {
        haoutil.msg('未选中');
        return;
      }
      const qddh = intersectsFeature.properties['起点点号'];
      // eslint-disable-next-line no-unused-vars
      const zddh = intersectsFeature.properties['终点点号'];
      // 递归找到上游的阀门
      result.forEach(element => {
        element.destroy()
      });
      result = []

      function recursionFind(features, dhNum) {
        let finds = features.filter(fea => fea.properties['终点点号'] == dhNum)
        finds.forEach(element => {
          let qddh1 = element.properties['起点点号']
          let findPoint1 = pointData.features.find(p => p.properties['物探点号'] == qddh1)
          if (findPoint1) {
            if (findPoint1.properties['特征标注'] === '阀门井') {
              let jd = findPoint1.geometry.coordinates[0]
              let wd = findPoint1.geometry.coordinates[1]
              let gd = findPoint1.geometry.coordinates[2]
              let item = findPoint1.properties
              let divpoint = new dadi.DivPoint(window.viewer, {
                html: '<div class="dadi-animation-point" style="color:' + '#95e40c' + ';"><p></p></div>',
                position: Cesium.Cartesian3.fromDegrees(jd, wd, gd),
                anchor: [0, 0],
                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000),//按视距距离显示
                data: item,
                popup: ['物探点号', 'X', 'Y', '地面高程', '井深', '特征标注'].map(it => {
                  return `<div style="width: 200px; display:flex;">
                                            <label style="width: 80px; ">${it}：</label>
                                            <span style="width: 120px; ">${item[it]}</span>
                                        </div>`
                }).join('')
                // click: function (entity) {//单击后的回调
                //     var item = entity.data;
                //     haoutil.msg('单击了：' + item["特征标注"]);
                // }
              });
              result.push(divpoint)
            }
            recursionFind(features, qddh1)
          }
        });
      }

      recursionFind(lineData.features, qddh)
      if (result.length == 0) {
        haoutil.msg('没有找到阀门！');
      }

    }
  },
  watch: {
    index() {
      this.runCommand()
    }
  },
  computed: {},
  beforeDestroy() {
    this.clearDraw()
  },
}
</script>

<style scoped>
.main-explosionTubeAnalysis {
  position: relative;
  height: 0;
  width: 0;
}
</style>
